<template>
    <div>
        <Table height="800" border highlight-row :columns="tableHeader" :data="tableContent"></Table>
    </div>
</template>

<script>
    import $ from '../../../lib/util';
    import qs from 'qs';
    export default {
        name: 'menu-index',
        data(){
            return {
                tableHeader: [
                    {
                        type: 'index',
                        title: '序号'
                    },
                    {
                        title: '菜单名称',
                        key: 'desc'
                    },
                    {
                        title: '访问地址',
                        key: 'url'
                    },
                    {
                        title: '启用表示',
                        key: 'flag',
                        align:'center',
                        render: function (h, params) {
                            return h('div', [
                                h('Checkbox', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        value: params.row.flag==false,
                                        disable: !params.row.flag==false,
                                    },
                                    on: {
                                        'on-change': function (val) {
                                            let flag = val ? 0 : 1;
                                            let json = {
                                                'id':params.row.id,
                                                'flag': flag
                                            };
                                            $.ajax.post('/menu/update/',qs.stringify(json)).then(res=>{
                                               console.log(res.msg);
                                            });
                                        }
                                    }
                                }),
                            ]);
                        }
                    },
                    {
                        title: '备注',
                        key: 'mark'
                    }
                ],
                tableContent: []
            }
        },
        mounted() {
            const _this = this;
            $.openProcessLoading(_this, '正在load数据');
            $.ajax.get('/menu/').then(res => {
                $.closeProcessLoading(_this);
                _this.tableContent = res.msg.filter(function (item) {
                    if(item.type === 1)
                        return item;
                });
            });
        },
        methods: {
            functionFun() {
                console.log('>>>>');
            }
        }
    }
</script>

<style scoped>

</style>
